import { defineComponent, h } from 'vue';

import { Form, FormItem, Input, InputPassword } from 'ant-design-vue';

interface FormItem<T extends string> {
  component: T;
  componentProps: any;
  fieldName: string;
  label?: string;
}

interface FormConfig<T extends string> {
  schema: Array<FormItem<T>>;
}

const componentsMap = {
  Input,
  InputPassword,
};

export const useForm = (config: FormConfig<keyof typeof componentsMap>) => {
  const form = defineComponent({
    setup() {
      return () =>
        h(
          Form,
          {},
          config.schema.map((item) => {
            return h(FormItem, {}, [
              h(componentsMap[item.component], item.componentProps),
            ]);
          }),
        );
    },
  });
  return form;
};
